<template>
	<view>
		<ttBar title="我的关注" leftIcon="icon-back"></ttBar>
		<view class="tabHead">
			<text class="headItem" :class="[showType==1?'active':'']" @tap="toggleType(1)">关注课程</text>
			<text class="headItem " :class="[showType==2?'active':'']" @tap="toggleType(2)">关注店铺</text>
		</view>
		<view class="tbCnt">
			<scroll-view :scroll-y="true" :style="{'height':scHeight+'px'}" @scrolltolower="getData">
				<view class="list" v-if="showType==1">
					<goodItem v-for="(item,index) in list" :key="index" :goodInfo="item"></goodItem>
				</view>
				<view class="list" v-if="showType==2">
					<shopItem v-for="(item,index) in list" :key="index" :shopInfo="item"></shopItem>
				</view>
				<emptyBox v-if="list.length<1"></emptyBox>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import goodItem from "@/components/collectionItem/goodItem.vue";
	import shopItem from "@/components/collectionItem/shopItem.vue";
	export default {
		components:{
			goodItem,
			shopItem
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		data() {
			return {
				showType:1,
				scHeight:uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.upx2px(180),
				postData:{
					userId:0,
					type:1,
					page_no:1,
					page_size:10
				},
				hasNext:true,
				list:[]
			};
		},
		methods:{
			getData(){
				if(this.hasNext){
					this.postData.userId=this.userInfo.userId;
					this.postData.type=this.showType;
					this.$store.dispatch("apiGetMyCollection",this.postData).then(res=>{
						if(res.data.code==1){
							this.list=this.list.concat(res.data.data.items);
							this.hasNext=res.data.data.hasNext;
							this.postData.page_no=res.data.data.nextPage;
						}
					})
				}else{
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
				
			},
			toggleType(e){
				this.showType=parseInt(e);
				this.list=[];
				this.hasNext=true;
				this.postData.page_no=1;
				this.getData();
			}
		},
		onLoad() {
			this.getData();
			uni.$on("sxGuanzhu",()=>{
				this.list=[];
				this.hasNext=true;
				this.postData.page_no=1;
				this.getData();
			})
		},
		
		onPullDownRefresh() {
			
			setTimeout(() => {
				this.list=[];
				this.hasNext=true;
				this.postData.page_no=1;
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
			
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	.tabHead{
		height: 90upx;
		display: flex;
		justify-content: space-around;
		border-bottom: 2upx solid #f2f2f2;
		background-color: #FFFFFF;
		text{
			font-size: 32upx;
			line-height: 82upx;
			border-bottom: 6upx solid rgba(0,0,0,0);
			color: #202932;
		}
		.active{
			color: #f79f21;
			border-bottom: 6upx solid #f79f21;
		}
	}
	.list{
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
		padding: 18upx;
	}
</style>
